<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true">
            <el-form-item label="选择运行配用系统" prop="id">
                <el-select v-model="queryParams.id" clearable filterable placeholder="请选择">
                    <el-option v-for="item in systemGroupList" :key="item.id" :label="item.groupName"
                        :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="getList">搜索</el-button>
                <el-button icon="Check" @click="updateStandbycolumn">提交</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="systemList"  row-key="id">

            <el-table-column align="center" type="expand">
                <template #default="scopes">
                    <el-table :data="scopes.row.systemList" hide-headers class="hide-table-header" row-key="id">
                        <el-table-column label="列状态" align="center" prop="realname">
                            <template #default="scopes">
                                <el-select v-model="scopes.row.isRunning" @change="getXd(scopes.row)" class="m-2"
                                    placeholder="Select" size="small">
                                    <el-option
                                        v-for="item in [{ label: '备用', value: '0' }, { label: '运行', value: '1' }]"
                                        :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作时间" align="center" prop="create_time">
                            <template #default="scopes">
                                <el-date-picker required @change="getXd(scopes.row)" v-model="scopes.row.operateTime"
                                    type="datetime"></el-date-picker>
                            </template>
                        </el-table-column>
                        <el-table-column label="运行备用列" align="center" prop="standbycolumnName" />
                    </el-table>
                </template>

            </el-table-column>
            <el-table-column label="列状态" align="left" prop="groupName">
                <template #default="scopes">
                    <span style="color: #409EFF">{{ scopes.row.groupName }}({{ scopes.row.cnt }}列)</span>
                </template>
            </el-table-column>
            <el-table-column label="操作时间" align="center" prop="create_time" />
            <el-table-column label="运行备用列" align="center" prop="create_time" />
        </el-table>



    </div>
</template>

<script setup name="System1">
import { listSystem, listSystemGroup, editStandbycolumn } from "@/api/factoryInfo/system1/system1";
import { ref } from "vue";
const { proxy } = getCurrentInstance();


const systemList = ref([]);
const xdList = ref([]);
const systemGroupList = ref([]);
const data = reactive({
    form: {},
    queryParams: {
        id: undefined
    },
});

const { queryParams, form } = toRefs(data);

async function updateStandbycolumn() {
    debugger
    if(xdList.value.length == 0){
        proxy.$modal.msgSuccess("未作改变，不需保存");
        return;
    }
    proxy.$modal.confirm('是否要提交设置').then(function () {
        systemGroupList.value
        debugger
        return editStandbycolumn(xdList.value);
    }).then(() => {
        getList();
        xdList.value = []; //清空已操作
        proxy.$modal.msgSuccess("设置成功");
    }).catch(() => { });
}


function getXd(row) {
    let flg = true;

    xdList.value.forEach(function (element, index, arr) {
        if (element.id == row.id) {
            flg = false;
            xdList.value.splice(index, 1, row)
        }
    });
    if (flg) {
        xdList.value.push(row);
    }
}


function getList() {
    listSystem(queryParams.value).then(response => {
        systemList.value = response.data;
    });
}
getList();

function getSystemGroupList() {
    listSystemGroup({}).then(response => {
        systemGroupList.value = response.data;
    });
}
getSystemGroupList();



</script>

<style lang='scss' scoped>
/* 隐藏表头 */
::v-deep .hide-table-header .el-table__header-wrapper {
    display: none;
}
</style>